<template>
    <div id="perspective">
      <!-- :class="{ animation: animationFlag == true }" -->
      <div id="wrap" class="animation" @mouseover="setClearTimer" @mouseleave="setIntervalTimer">
        <div class="rotate-item" v-for="(item, index) in baseList" :key="index">
          <span @click.stop="handleRotate(item)">{{ item.name }}</span>
        </div>
        <p></p>
      </div>
    </div>
  </template>
  
  <script>
  window.roY = 0
  export default {
    data() {
      return {
        currentIndex: 0,
        baseList: [
          { name: '上城区数字总站', url: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.0WqtZG690eVAbCfUPNpJcQAAAA?pid=ImgDet&rs=1' },
          { name: '拱墅区数字总站', url: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.0WqtZG690eVAbCfUPNpJcQAAAA?pid=ImgDet&rs=1' },
          { name: '西湖区数字总站', url: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.0WqtZG690eVAbCfUPNpJcQAAAA?pid=ImgDet&rs=1' },
          { name: '滨江区数字总站', url: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.0WqtZG690eVAbCfUPNpJcQAAAA?pid=ImgDet&rs=1' },
          { name: '临平区数字总站', url: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.0WqtZG690eVAbCfUPNpJcQAAAA?pid=ImgDet&rs=1' },
          { name: '钱塘区数字总站', url: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.0WqtZG690eVAbCfUPNpJcQAAAA?pid=ImgDet&rs=1' },
          { name: '富阳区数字总站', url: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.0WqtZG690eVAbCfUPNpJcQAAAA?pid=ImgDet&rs=1' },
          { name: '淳安县数字总站', url: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.0WqtZG690eVAbCfUPNpJcQAAAA?pid=ImgDet&rs=1' },
          { name: '建德市数字总站', url: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.0WqtZG690eVAbCfUPNpJcQAAAA?pid=ImgDet&rs=1' },
          { name: '余杭区数字总站', url: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.0WqtZG690eVAbCfUPNpJcQAAAA?pid=ImgDet&rs=1' },
          { name: '临安区数字总站', url: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.0WqtZG690eVAbCfUPNpJcQAAAA?pid=ImgDet&rs=1' },
          { name: '临平区数字总站', url: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.0WqtZG690eVAbCfUPNpJcQAAAA?pid=ImgDet&rs=1' },
          { name: '萧山区数字总站', url: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.0WqtZG690eVAbCfUPNpJcQAAAA?pid=ImgDet&rs=1' },
          { name: '临安区数字总站', url: '' },
          { name: '钱塘区数字总站', url: '' },
          { name: '桐庐县数字总站', url: '' }
        ],
        animationFlag: true,
        globalTimer: null
      }
    },
    mounted() {
      window.onload = this.initWrap()
    },
    methods: {
      setIntervalTimer() {
        let wrapDemo = document.getElementById('wrap')
        this.setClearTimer()
        this.globalTimer = setInterval(() => {
          wrapDemo.style.transform = 'rotateX(-3deg) rotateY(' + (window.roY += 0.1) + 'deg)'
        }, 20)
      },
      setClearTimer() {
        if (this.globalTimer) {
          clearInterval(this.globalTimer)
        }
      },
  
      handleRotate(item) {
        window.open(item.url)
      },
      initWrap() {
        this.setIntervalTimer()
        // let that = this
        let wrapDemo = document.getElementById('wrap')
        let rotateAll = wrapDemo.getElementsByClassName('rotate-item')
        let rotateLength = rotateAll.length
        let Deg = 360 / rotateLength
        let nowX,
          lastX,
          minusX = 0
        // let roY = 0
        //, roX = 0
        let timer
  
        for (let i = 0; i < rotateLength; i++) {
          rotateAll[i].style.transform = 'rotateY(' + i * Deg + 'deg) translateZ(480px)'
          rotateAll[i].style.transition = 'transform 1s ' + (rotateLength - 1 - i) * 0.1 + 's'
        }
  
        mTop()
  
        window.onresize = mTop
  
        function mTop() {
          let wH = document.documentElement.clientHeight
          wrapDemo.style.marginTop = wH / 4.5 + 'px'
        }
        // 拖拽：三个事件-按下 移动 抬起
        document.onmousedown = function (ev) {
          ev.stopPropagation()
          console.log('🚀 initWrap ~ ev', ev)
          ev = ev || window.event
          // that.animationFlag = false
          //鼠标按下的时候，给前一点坐标赋值，为了避免第一次相减的时候出错
          lastX = ev.clientX
          /* let targetName = ev.target.innerText || ''
          let currentIndex = 0
          let flag = false
          // 获取当前
         for (let index = 0; index < that.baseList.length; index++) {
            const element = that.baseList[index]
            if (targetName == element.name) {
              currentIndex = index
              flag = true
              break
            }
          }
          if (flag) {
            console.log('---点击----')
            if (document.querySelectorAll('.rotate-item')) {
              let dome = document.querySelectorAll('.rotate-item')[currentIndex].getElementsByTagName('span')[0]
              dome.onclick = function (e) {
                e.stopPropagation()
                // 定位到当前
                wrapDemo.style.transform = 'rotateX(-3deg)  rotateY(' + (rotateLength - currentIndex) * Deg + 'deg)'
                wrapDemo.style.transition = 'transform ' + (rotateLength - currentIndex) + 's'
                setTimeout(() => {
                  window.open(that.baseList[currentIndex].url)
                  clearInterval(timer)
                  that.animationFlag = true
                }, `${rotateLength - currentIndex}00`)
                window.open(that.baseList[currentIndex].url)
                clearInterval(timer)
                that.animationFlag = true
              }
            }
          } else { */
          console.log('---移动----')
          //移动
          this.onmousemove = function (ev) {
            ev = ev || window.event
  
            clearInterval(timer)
  
            nowX = ev.clientX // clientX 鼠标距离页面左边的距离
  
            //当前坐标和前一点坐标差值
            minusX = nowX - lastX
            // minusY = nowY - lastY
  
            //更新wrap的旋转角度，拖拽越快-> minus变化大 -> roY变化大 -> 旋转快
            window.roY += minusX * 0.2 // roY = roY + minusX*0.2;
            // roX -= minusY * 0.1
  
            // 定时器设置 0.02秒   1s 12度
            wrapDemo.style.transform = 'rotateX(-3deg) rotateY(' + window.roY + 'deg)'
  
            /*
                    //生成div，让div跟着鼠标动
                    let oDiv = document.createElement('div');
                    oDiv.style.cssText = 'width:5px;height:5px;background:red;position:fixed;left:'+nowX+'px;top:'+nowY+'px';
                    this.body.appendChild(oDiv);
                    */
  
            //前一点的坐标
            lastX = nowX
          }
          //抬起
          this.onmouseup = function () {
            this.onmousemove = null
            // that.globalTimer = setInterval(function () {
            //   minusX *= 0.95
            //   minusY *= 0.95
            //   window.roY += minusX * 0.2 // roY = roY + minusX*0.2;
            //   // roX -= minusY * 0.1
            //   // console.log('🚀 roX', roX)
            //   wrapDemo.style.transform = 'rotateX(-3deg) rotateY(' + window.roY + 'deg)'
            //   if (Math.abs(minusX) < 0.1 && Math.abs(minusY) < 0.1) {
            //     clearInterval(that.globalTimer)
            //     that.animationFlag = true
            //   }
            // }, 13)
          }
          // }
          return false
        }
      }
    }
  }
  </script>
  <style lang="scss" scoped>
  #perspective{
      perspective:1000px;
    #wrap{
      width:180px;  /*133:200  4:6  */
      height:180px;
      margin:0 auto;
      position:relative;
  
      /*搭建3D效果必须的两个属性：一个变换风格变3d，一个场景景深800px*/
      transform-style:preserve-3d;
      transform:rotateX(-3deg) rotateY(0deg);
  
      p{
        width:1000px;
        height:1000px;
        background:-webkit-radial-gradient(center center,600px 600px,rgba(244,23,234,0.2),rgba(0,0,0,0));
        border-radius:100%;
        position:absolute;
        left:50%;
        top:50%;
        margin-left:-500px;
        margin-top:-500px;
        transform:rotateX(90deg);
      }
      .rotate-item {
        position:absolute;
        width: 180px;
        height: 74px;
        background: url('https://tse1-mm.cn.bing.net/th/id/OIP-C.0WqtZG690eVAbCfUPNpJcQAAAA?pid=ImgDet&rs=1') no-repeat center;
        background-size: 100%;
        font-size: 18px;
        letter-spacing: 2px;
        color: #fff;
        font-weight: bold;
        text-align: center;
        line-height: 74px;
        cursor: pointer;
        border-radius:1px;
  
        transform:rotateY(0deg) translateZ(0px);
        /*倒影：朝向 偏移 遮盖*//*线性渐变(从哪里开始,开始时候的颜色,结束时候的颜色)*/
        // -webkit-box-reflect:below 5px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,0.5) 100%);
      }
    }
    .animation {
      // animation: cir 30s linear 0s infinite;
      &:hover {
        animation-play-state: paused !important;
        p,div {
          animation-play-state: paused !important;
        }
      }
    }
  
  }
  @keyframes cir {
    0% {
      transform: rotateX(-3deg) rotateY(0deg)  ;
    }
    100% {
      transform: rotateX(-3deg) rotateY(360deg)  ;
    }
  }
  </style>
  